<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理系统</title>
    <!-- ======基础样式开始======-->
    <link href="../../css/bootstrap/style.default.css" rel="stylesheet">
    <!--换肤-->
    <link href="../../css/bootstrap/style.katniss.css" rel="stylesheet">
    <link href="../../js/zTree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <!--IE8兼容样式-->
    <link href="../../css/bootstrap/navigateLowerIE8.css" rel="stylesheet">
    <!-- ======基础样式结束======-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="../../js/bootstrap/html5shiv.js"></script>
    <script src="../../js/bootstrap/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="contentpanel">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">资源管理</h4>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-btns"><a href="#" class="minimize">−</a></div>
                            <h4 class="panel-title">资源管理</h4>
                        </div>
                        <div class="panel-body">
                            <div id="ztreedemo" class="ztree"></div>
                        </div>
                    </div>
                </div>
            <div class="col-sm-6">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <div class="panel-btns"><a href="#" class="minimize">−</a></div>
                        <h4 class="panel-title">新建</h4>
                    </div>
                    <div class="panel-body">
                        <form action="" class="form-horizontal">
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">资源名称：</label>

                                <div class="col-sm-7">
                                    <input type="text" class="form-control" placeholder="请输入分类名称"/>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">排序：</label>

                                <div class="col-sm-7">
                                    <input type="number" class="form-control" placeholder="请输入排序"/>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">是否启用：</label>

                                <div class="col-sm-7">
                                    <select name="" class="form-control">
                                        <option value="">是</option>
                                        <option value="">否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">URL：</label>

                                <div class="col-sm-7">
                                    <input type="number" class="form-control" placeholder="请输入路径"/>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">备注：</label>

                                <div class="col-sm-7">
                                    <textarea name="" cols="30" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="text-center">
                                <a id="addParent" href="#" title="增加父节点" class="btn btn-primary"
                                   onclick="return false;"><i class="fa fa-plus"></i> 新建同级</a>
                                <a id="addLeaf" href="#" title="增加子节点" class="btn btn-primary"
                                   onclick="return false;"><i class="fa fa-leaf"></i> 新建子级</a>
                                <a  href="#" title="保存" class="btn btn-primary"
                                  ><i class="fa fa-save"></i> 保存</a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-btns"><a href="#" class="minimize">−</a></div>
                        <h4 class="panel-title">编辑</h4>
                    </div>
                    <div class="panel-body">
                        <form action="" class="form-horizontal">
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">资源名称：</label>

                                <div class="col-sm-7">
                                    <input type="text" class="form-control" value="腕表" placeholder="请输入分类名称"/>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">排序：</label>

                                <div class="col-sm-7">
                                    <input type="number" class="form-control" value="1" placeholder="请输入排序"/>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">是否启用：</label>

                                <div class="col-sm-7">
                                    <select name="" class="form-control">
                                        <option value="">是</option>
                                        <option value="">否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">URL：</label>

                                <div class="col-sm-7">
                                    <input type="number" class="form-control" value="1" placeholder="请输入路径"/>
                                </div>
                            </div>
                            <div class="form-group m-b-15">
                                <label class="control-label col-sm-4">备注：</label>

                                <div class="col-sm-7">
                                    <textarea name="" cols="30" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="text-center">
                                <a href="#" title="保存" class="btn btn-primary"><i class="fa fa-save"></i> 保存</a>
                                <a href="#" title="删除" class="btn btn-primary"><i class="fa fa-close"></i> 删除</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
</div>
<script src="../../js/bootstrap/jquery-1.11.1.min.js"></script>
<script src="../../js/bootstrap/jquery-migrate-1.2.1.min.js"></script>
<script src="../../js/bootstrap/bootstrap.min.js"></script>
<script src="../../js/bootstrap/modernizr.min.js"></script>
<script src="../../js/bootstrap/retina.min.js"></script>
<script src="../../js/bootstrap/jquery-ui-1.10.3.min.js"></script>
<script src="../../js/util/util.js"></script>
<script src="../../js/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<SCRIPT type="text/javascript">
    <!--
    var setting = {
        view: {
            selectedMulti: false
        },
        edit: {
            enable: true,
            showRemoveBtn: true,
            showRenameBtn: true
        },
        data: {
            keep: {
                parent: true,
                leaf: true
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove
        }
    };

    var zNodes = [
        {id: 1, pId: 0, name: "父节点 1", open: true},
        {id: 11, pId: 1, name: "叶子节点 1-1"},
        {id: 12, pId: 1, name: "叶子节点 1-2"},
        {id: 13, pId: 1, name: "叶子节点 1-3"},
        {id: 2, pId: 0, name: "父节点 2", open: true},
        {id: 21, pId: 2, name: "叶子节点 2-1"},
        {id: 22, pId: 2, name: "叶子节点 2-2"},
        {id: 23, pId: 2, name: "叶子节点 2-3"},
        {id: 3, pId: 0, name: "父节点 3", open: true},
        {id: 31, pId: 3, name: "叶子节点 3-1"},
        {id: 32, pId: 3, name: "叶子节点 3-2"},
        {id: 33, pId: 3, name: "叶子节点 3-3"}
    ];
    var log, className = "dark";
    function beforeDrag(treeId, treeNodes) {
        return true;
    }
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
    }
    function onRemove(e, treeId, treeNode) {
        showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
    }
    function beforeRename(treeId, treeNode, newName) {
        if (newName.length == 0) {
            alert("节点名称不能为空.");
            var zTree = $.fn.zTree.getZTreeObj("ztreedemo");
            setTimeout(function () {
                zTree.editName(treeNode)
            }, 10);
            return false;
        }
        return true;
    }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
                h = now.getHours(),
                m = now.getMinutes(),
                s = now.getSeconds(),
                ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    var newCount = 1;
    function add(e) {
        var zTree = $.fn.zTree.getZTreeObj("ztreedemo"),
                isParent = e.data.isParent,
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
        if (treeNode) {
            treeNode = zTree.addNodes(treeNode, {
                id: (100 + newCount),
                pId: treeNode.id,
                isParent: isParent,
                name: "new node" + (newCount++)
            });
        } else {
            treeNode = zTree.addNodes(null, {
                id: (100 + newCount),
                pId: 0,
                isParent: isParent,
                name: "new node" + (newCount++)
            });
        }
        if (treeNode) {
            zTree.editName(treeNode[0]);
        } else {
            alert("叶子节点被锁定，无法增加子节点");
        }
    }
    ;
    function edit() {
        var zTree = $.fn.zTree.getZTreeObj("ztreedemo"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
        if (nodes.length == 0) {
            alert("请先选择一个节点");
            return;
        }
        zTree.editName(treeNode);
    }
    ;
    function remove(e) {
        var zTree = $.fn.zTree.getZTreeObj("ztreedemo"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
        if (nodes.length == 0) {
            alert("请先选择一个节点");
            return;
        }
        var callbackFlag = $("#callbackTrigger").attr("checked");
        zTree.removeNode(treeNode, callbackFlag);
    }
    ;
    function clearChildren(e) {
        var zTree = $.fn.zTree.getZTreeObj("ztreedemo"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
        if (nodes.length == 0 || !nodes[0].isParent) {
            alert("请先选择一个父节点");
            return;
        }
        zTree.removeChildNodes(treeNode);
    }
    ;

    $(document).ready(function () {
        $.fn.zTree.init($("#ztreedemo"), setting, zNodes);
        $("#addParent").bind("click", {isParent: true}, add);
        $("#addLeaf").bind("click", {isParent: false}, add);

    });
    //-->
</SCRIPT>
</body>
</html>